<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<label>旧密码:</label>
				<input v-model="oldPassword" type="password" placeholder="请输入旧密码" />
				<text v-if="oldPasswordError" class="error-tip">{{ oldPasswordError }}</text>
			</view>
			<view class="form-item">
				<label>新密码:</label>
				<input v-model="newPassword" type="password" placeholder="请输入新密码（至少6位）" />
				<text v-if="newPasswordError" class="error-tip">{{ newPasswordError }}</text>
			</view>
			<view class="form-item">
				<label>确认新密码:</label>
				<input v-model="confirmPassword" type="password" placeholder="请再次输入新密码" />
				<text v-if="confirmPasswordError" class="error-tip">{{ confirmPasswordError }}</text>
			</view>
			<view class="button-group">
				<button @click="submitChange">提交修改</button>
				<button @click="cancelChange">重置</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		changePassword
	} from '../../request/api.js'; // 假设这是修改密码的 API 函数

	const oldPassword = ref('');
	const newPassword = ref('');
	const confirmPassword = ref('');
	const oldPasswordError = ref('');
	const newPasswordError = ref('');
	const confirmPasswordError = ref('');

	const submitChange = async () => {
		// 清空错误信息
		oldPasswordError.value = '';
		newPasswordError.value = '';
		confirmPasswordError.value = '';

		// 验证旧密码
		if (!oldPassword.value) {
			oldPasswordError.value = '旧密码不能为空';
			return;
		}

		// 验证新密码长度
		if (newPassword.value.length < 6) {
			newPasswordError.value = '新密码至少6位';
			return;
		}

		// 验证新密码和确认新密码是否一致
		if (newPassword.value !== confirmPassword.value) {
			confirmPasswordError.value = '新密码和确认新密码不一致';
			return;
		}

		try {
			// 调用修改密码的 API
			const res = await changePassword(oldPassword.value, newPassword.value);
			// 假设 API 返回成功状态
			if (res.message) {
				uni.showToast({
					title: '密码修改成功',
					icon: 'success'
				});
				// 清空输入框
				oldPassword.value = '';
				newPassword.value = '';
				confirmPassword.value = '';
				if (res.message === 'Old password and new password are required') {
					uni.showToast({
						title: '密码修改失败 旧密码不正确',
						icon: 'fail'
					});
				}
			} else {
				uni.showToast({
					title: '密码修改失败，请重试',
					icon: 'none'
				});
			}
		} catch (error) {
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		}
	};

	const cancelChange = () => {
		// 清空输入框和错误信息
		oldPassword.value = '';
		newPassword.value = '';
		confirmPassword.value = '';
		oldPasswordError.value = '';
		newPasswordError.value = '';
		confirmPasswordError.value = '';
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.form {
		margin-top: 50px;
	}

	.form-item {
		margin-bottom: 20px;
		position: relative;
	}

	.form-item label {
		display: block;
		margin-bottom: 5px;
	}

	.form-item input {
		width: 100%;
		padding: 10px 0px 10px 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.error-tip {
		color: red;
		font-size: 12px;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
	}

	.button-group button {
		width: 48%;
		padding: 10px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
</style>